<template>
	<view class="flex justify-center" style="background-color: #F5F5F9;">
		<scroll-view :scroll-y="true" :style="{height:scrollHeight+'px'}" >

			<view style="width: 100%;">
				<!-- 第一个 -->
				<view class="card padding margin-top-xs">
					<view class="text-xxxl">{{info.title}}</view>
					<view class="flex padding-top">业务分类：<view class="text-bold">{{info.type}}</view>
					</view>
					<view class="flex padding-top-xs"> 状态：<view style="color: #80c9f4;" class="text-bold">
							{{info.status}}
						</view>
					</view>
					<view class="flex align-end padding-top-xs">签署截止日期：<view class="text-bold">{{info.endTime}}</view>
					</view>
				</view>

				<view class="card padding">
					<view class="text-bold">文件</view>
					<view class="padding-top">
						<view class="flex padding-bottom-xs align-center" v-for="(item, index) in info.docMap"
							:key="index">
							<u-icon size="20" class="padding-right-xs" name="order"></u-icon>
							<a href="javaScript:void(0)" @click="openFile(item.url)">{{item.name}}</a>
							<!-- <view style="font-weight: 400;">{{item.name}}</view> -->
						</view>
					</view>
				</view>
				<view class="card padding margin-top-sm">
					<view class="text-bold">签署方</view>
					<view class="padding-top" style="color: #a7b6b1;">{{`本文件由${info.createUser}于${info.createTime}发起`}}
					</view>
					<view class="flex justify-center padding-top" v-if="toBeSignedUsers.length > 0">
						<view class="card flex padding-sm" style="width: 98%;">
							<view class="text-xs"
								style="margin-left: -30upx;margin-top: -10upx;width: 13%;   color: white;">
								<view style="background-color: #2a6dea;border-radius: 10upx;" class="padding-xs">
									待签署
								</view>
							</view>
							<view style="margin-left: -30upx;width: 100%;" class="padding-top">
								<view v-for="(user,index) in toBeSignedUsers" class="flex padding-top align-center"
									:key="index">
									<view class="text-bold">{{user.name}}</view>
									<u-icon name="account-fill" class="padding-right-xs" size="20"></u-icon>
									<view style="color: #a7b6b1;">({{user.mobile}})</view>
									<u-icon name="edit-pen" class="padding-left-sm" size="20"></u-icon>
								</view>
								<view class="padding-top-sm">
									<u-loadmore status="loadmore" line @loadmore="loadmore"
										:loadmoreText="loadmoreText" />
								</view>
							</view>
						</view>


					</view>
				</view>
			</view>
		</scroll-view>



		<!-- 底部返回 -->
		<view class="bottom flex justify-center align-center">
			<view class="padding-right-xl">
				<view class="flex justify-center">
					<u-icon name="arrow-leftward" size="22" color="#a7b6b1"></u-icon>
				</view>
				<view style="color: #a7b6b1;" @click="toPage('/pages/work/doc/index')">返回</view>
			</view>
			<view style="width: 500upx;">
				<u-button @click="confirm" type="primary" :disabled="info.signStatus!=='to_be_signed'"
					:text="info.signStatus==='to_be_signed'?'确认签署':'已签署'" />
			</view>
			<!-- <view class="flex align-center justify-center"
				style="background-color: #2a6dea;width: 500upx;height:80upx;border-radius: 10upx;"
				@click="toPage(`/pages/sign/sign?docId=${this.id}`)">
				<view class="text-white">{{info.signStatus==='to_be_signed'?'确认签署':'已签署'}}</view>
			</view> -->
		</view>
	</view>
	
</template>

<script>
	import {
		getDetail,
		detailPage,
		update
	} from '@/api/doc.js'
	export default {
		onLoad(option) {
			this.id = option.id
			this.detail()
		},
		onReady() {
			let _this = this;
			uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
				success(res) { //成功回调函数
					let wHeight = res.windowHeight //windoHeight为窗口高度，主要使用的是这个
					let bottomH = uni.createSelectorQuery().select(".bottom"); //想要获取高度的元素名（class/id）
					bottomH.boundingClientRect(data => {
						_this.scrollHeight = data.top //计算高度：元素高度=窗口高度-元素距离顶部的距离（data.top）
					}).exec()
				}
			})
		},
		data() {
			return {
				id: undefined,
				info: {},
				returnUrl: '/static/work/banner.jpg',
				toBeSignedUsers: [],
				queryParams: {
					pageNo: 1,
					pageSize: 5,
					docId: this.id
				},
				loadmoreText: '加载更多',
				scrollHeight: undefined
			}
		},
		methods: {
			loadmore() {
				this.detailPage()
			},
			detailPage() {
				this.loadmoreText = "加载中..."
				this.queryParams.docId = this.id
				detailPage(this.queryParams).then(res => {
					this.toBeSignedUsers = [...this.toBeSignedUsers, ...res.data]
					if (res.data.length > 0) {
						this.queryParams.pageNo += 1
					}
				}).finally(() => {
					this.loadmoreText = "加载更多"
					this.$modal.closeLoading()
				})
			},
			detail() {
				getDetail(this.id).then(res => {
					this.info = res.data
					this.detailPage()
				})
			},
			openFile(url) {
				let path = encodeURIComponent(url.split('file')[1])
				window.open(`http://view.officeapps.live.com/op/view.aspx?src=${url}`)
				// window.open(`https://ycxueliang.cn/view?url=${path}`)
			},
			saveUrl(url) {
				uni.setStorageSync('docxUrl', url)
				console.log(url)
				this.toPage(`/pages/work/doc/view`)
			},
			toPage(toUrl) {
				uni.navigateTo({
					url: toUrl
				})
			},
			openDocument(toUrl) {
				uni.downloadFile({
					url: toUrl,
					success: function(res) {
						var filePath = res.tempFilePath;
						uni.openDocument({
							filePath: filePath,
							success: function(res) {}
						});
					}
				})
			},
			confirm() {
				const that = this
				if (this.info.hasSignedImg) {
					uni.showModal({
						title: '已存在签名,是否直接使用?',
						cancelText: '取消',
						confirmText: '确定',
						success: function(res) {
							if (res.cancel) {
								that.toPage(`/pages/sign/sign?docId=${that.id}`)
								return
							}
							update(that.info.signUrl, that.id).then(res => {
								uni.showToast({
									title: '已成功签署',
									duration: 2000
								});
								uni.navigateTo({
									url: `/pages/work/doc/detail?id=${that.id}`
								})
							})
						},
						fail: function() {

						}
					})
				} else {
					that.toPage(`/pages/sign/sign?docId=${that.id}`)
				}

			}
		}
	}
</script>

<style scoped lang="less">
	.card {
		width: 100%;
		border-radius: 10upx;
		box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, 0.1), -1px -1px 3px 0 rgba(0, 0, 0, 0.1);
		background-color: #ffffff;
	}

	.bottom {
		position: fixed;
		bottom: 0;
		box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, 0.1), -1px -1px 3px 0 rgba(0, 0, 0, 0.1);
		width: 100%;
		height: 100upx;
	}
</style>